<!DOCTYPE html>
<html>
<head>
    <title>button</title>
    <link rel="Stylesheet" href="../lib/css/j3.css" />
    <script type="text/javascript" src="../lib/js/j3.js"></script>
</head>
<body>
<p id='normal'></p>
<p id='primary'></p>
<p id='disabled'>
    <input type="checkbox" id="chkSetDisabled" checked="checked" />
</p>
<p id='click'></p>
<p id="layout" style="width:150px"></p>
<script type="text/javascript">
    j3.ready(function () {
        new j3.Button({ ctnr: 'normal', text: 'normal' });
        new j3.Button({ ctnr: 'primary', text: 'primary', primary: true });
        var btn1 = new j3.Button({ ctnr: 'disabled', text: 'normal disabled', disabled: true });
        var btn2 = new j3.Button({ ctnr: 'disabled', text: 'primary disabled', primary: true, disabled: true });
        new j3.Button({ ctnr: 'click', text: 'click me',
            on: {
                click: function (sender) {
                    alert(sender.getText());
                }
            }
        });

        new j3.Button({ctnr: 'layout', text: 'layout', fill: 1});

        j3.on(j3.$('chkSetDisabled'), 'change', function () {
            btn1.setDisabled(this.checked);
            btn2.setDisabled(this.checked);
        });
    });
</script>
</body>
</html>
